<template>
    <!-- 
        渲染三级路由
        根据Transition组件使页面切换有过渡效果
        使用KeepAlive存缓组件内容
    -->
    <div>
        <RouterView v-slot="{ Component, route }">
            <Transition name="slide-fade" mode="out-in">
                <KeepAlive :max="5">
                    <component :is="Component" v-if="route.meta.KeepAlive" :key="route.fullPath" />
                </KeepAlive >
            </Transition>
            <Transition name="slide-fade" mode="out-in">
                <component :is="Component" v-if="!route.meta.KeepAlive" :key="route.fullPath" />
            </Transition>
        </RouterView>
    </div>
</template>
<style>
.slide-fade-enter-active {
    transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(-50px);
    opacity: 0;
}
</style>